@import "/web/css/common/main-common";

.main-cont{padding: 200px 0;min-width: @content;background: url("img/BG.jpg") center top no-repeat;}

.rank-box{
    margin-top: 0;
    .first{
        margin: 0 auto;
        .pic-box{
            .pic{cursor: auto;position: relative;}
            .arrow-video{
                position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.5);
                a{cursor: pointer;position: absolute;left: 50%;top: 50%;width: 90px;height: 89px;background-image: url("/web/views/index/img/btn-player.png");margin-left: -45px;margin-top: -45px;}
            }
        }
        .info{
            margin: 0 0 0 40px;text-align: center;
            .name{margin-top: 0;}
        }
        .btn{text-align: center;margin-top: 30px;}
        .qrcode{
            width: 160px;height: 160px;margin: 20px auto 0;border: 5px solid #fff;box-sizing: border-box;
        }
        .qrcode-msg{text-align: right;letter-spacing: 20px;font-size: 15px;color: #595757;width: 160px;margin: 0 auto;}
    }
}

.video-play-box{
    width: 100%;height: 98%;
    video{height: 100%;width: 100%;background-color: #000;}
}

@media (max-width: @sreen) {
    .main-cont{padding: 30/@rem 0 60/@rem;min-width: 100%;background: url("img/BG-m.jpg") center top / contain no-repeat;}

    .rank-box{
        margin-top: 60/@rem;width: 100%;
        .first{
            width: 100%;margin:0;height:auto;
            .pic-box{
                float: none;height: 406/@rem;width: 306/@rem;padding: 18/@rem 15/@rem 18/@rem 14/@rem;background-size: contain;background-repeat: no-repeat;margin: 0 auto;
                .pic{display: block;background: center / cover no-repeat;width: 100%;height: 100%;position: relative;border: 4/@rem solid #fff;box-sizing: border-box;}
                .arrow-video{
                    a{width: 90/@rem;height: 89/@rem;margin-left: -45/@rem;margin-top: -45/@rem;background-size: contain;}
                }
            }
            .info{
                float: none;width: 470/@rem;margin: 34/@rem auto 0;
                .name{margin-top: 40/@rem;font-size: 32/@rem;}
                .text{font-size: 20/@rem;margin-top: 20/@rem;line-height: 32/@rem;}
                .btn{margin-top: 50/@rem;height: 39/@rem;
                    img{height: 100%}
                }
            }
            .qrcode{display: none;}
            .qrcode-msg{display: none;}
        }
        .rank-like{
            height: 24/@rem;padding: 0 10/@rem 0 30/@rem;z-index: 1;min-width: 64/@rem;font-size: 18/@rem;line-height: 24/@rem;top: 12/@rem;left: 12/@rem;background-size: 15/@rem;border-radius: 6/@rem;background-position: 8/@rem 6/@rem;
        }
        .to-vote{
            width: 285px;height: 70px;background: url("/web/views/index/img/to-vote.png");display: block;margin: 70px auto 0;
        }
        .btn-vote{
            width: 125px;height: 31px;display: block;margin: 0 auto;background-image: url("/web/views/index/img/btn-vote.png");
        }
    }
    .video-play-box{
        width: 100%;height: 98%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;
        video{height: 100%;width: 100%;background-color: #000;}
    }
}